Skip to main content

Lab 1 - Explore a React Application

Intro​

In this lab we will see what basic react application looks like in the browser.

Pre-requisites​

Before starting this lab, you should have created a react application by running the command

npm create vite@latest

and entering the following options:

Project name: hello-world

Select a framework: React

Select a variant: Either Javascript or Typescript, optionally with SWC.

This will create a new React application called "Hello World".

1. Start the react development webserver​

When we create a new React application, we get a full application with some dummy content ready to edit. We will explore the code files that have been created in a later exercise.

To be able to see the website in the browser we need a webserver - this is because the code files need to be transpiled before we can see the generated content. The transpiling process converts the code files into plain javascript that the browser can execute.

React comes with a built in webserver designed for use in development, so we'll use that to help us view the site.

  1. Navigate into the folder that was created when you generated the app with
cd hello-world
  1. Get the required dependencies that are defined in the package.json file with
npm install
  1. Start the web server with
npm run dev
  1. When the server tells you that the site is ready to view, open your browser and visit the URL that is presented (probably http://localhost:5173)

2. Explore the website​

  1. Notice that the browser displays what looks like a full web page.

  2. View the page source - in most browsers you can do this by right clicking on the page and selecting view source from the menu.

  3. Notice how little html there is - the page is made up of almost no HTML, but there is a <div> with an id of root. There is also some reference to Javascript files. Everything you are seeing on the web page has been generated by the javascript that is run in the browser.

  4. Now look at the generated HTML using your browser's developer tools. To do this in Chrome, right click on the web page and choose inspect. In the Elements tab you'll see all the HTML that was generated by the javascript code.

3. Stop the web server​

  1. To stop the development web server, press CTRL + C

Summary​

In this lab we have:

  • Created a new react application by running the command npm create vite@latest
  • Started a web server that can transpile the code files into javascript that a browser can run with npm start
  • Viewed the web page in the browser, and seen that the page is made up of very litle HTML and some javascript. The javascript is executed in the browser and it generates everything we see on the page.